<script lang="ts">
  export let isShow: boolean = false;
</script>

<div class="s-loading {isShow ? 'show' : 'hidden'}">
  <img
    src="//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/bdcc6b24-b129-451a-9a47-5334f69c7a16.png"
    alt=""
    class="s-loading-img"
  />
  <span>加载中...</span>
</div>

<style lang="less">
  @keyframes rotate-animate {
    100% {
      transform: rotate(405deg);
    }
  }
  .s-loading {
    width: 460px;
    height: 340px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 10;
    &.show {
      display: flex;
    }
    &.hidden {
      display: none;
    }
    &-img {
      width: 32px;
      height: 32px;
      transform: rotate(45deg);
      animation-name: rotate-animate;
      animation-duration: 1.2s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      margin-bottom: 8px;
    }
    span {
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: rgba(255,255,255,0.6);
      letter-spacing: 0;
      line-height: 20px;
      font-weight: 400;
    }
  }
</style>
